{% extends 'base/front_base.html' %}

{% block title %}
    用户注册
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static 'css/auth/auth.css' %}">
    <script src="{% static 'js/auth.js' %}"></script>
{% endblock %}
{% block main %}
    <form action="" method="post">{% csrf_token %}
        <div class="main-auth-group">
            <div class="top-group">
                <span class="title">注  册</span>
                <a href="{% url 'xfzauth:login' %}" class="more-link">立即登陆</a>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" id="telephone" name="telephone" placeholder="请输入手机号码">
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" name="username" placeholder="请输入用户名">
                </div>
                <div class="input-group">
                    <input type="text" class="form-control split-form-control" name="img_captcha" placeholder="验证码">
                    <img src="{% url 'xfzauth:img_captcha' %}" alt="" class="img-captcha input-group-addon" style="cursor: pointer">
                </div>
                <div class="input-group">
                    <input type="password" class="form-control" name="password1" placeholder="请输入密码">
                </div>
                <div class="input-group">
                    <input type="password" class="form-control" name="password2" placeholder="请再次输入密码">
                </div>
                <div class="input-group">
                    <input type="text" class="form-control split-form-control" name="sms_captcha" placeholder="短信验证码">
                    <span class="sms-captcha-btn input-group-addon">发送验证码</span>
                </div>
                {% if messages %}
                    <div class="input-group">
                        {#消息提醒#}
                        {% for message in messages %}
                            <p style="text-align: center;color: red">{{ message }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="input-group">
                    <button class="submit-btn">立 即 注 册</button>
                </div>
            </div>
        </div>
    </form>
{% endblock %}

